<template>
<div style="height: 100vh;overflow: hidden;background-image: url(/img/bg.webp)">
<el-row :gutter="10" justify="center" style="margin-top: 150px">
  <el-col :span="7">
    <el-card style="text-align: center">
      <h3 style="font-size: 30px;position: relative;bottom: 20px;color: #42b983">智慧医疗预约系统</h3>
      <el-form>
        <el-form-item>
          <el-input placeholder="请输入用户名" type="text" v-model="staff.name">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item style="position: relative">
          <el-input placeholder="请输入密码" show-password type="password" v-model="staff.password">
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
          <el-link :underline="false" style="color:#909399;font-size: 10px;" @click="logPhone">手机号登录</el-link>
          <span style="color:#909399;font-size: 10px;position: absolute;right: 0;top: 32px">无法登录，请联系管理员</span>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%;background-color: #42b983;color: #fff" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-col>
</el-row>
</div>
  <el-dialog style="width: 500px" title="手机号登录" :before-close="handleClose" v-model="dialogVisible">
    <el-form>
      <el-form-item label="手机号">
        <el-input placeholder="请输入手机号" v-model="staff.phone"/>
      </el-form-item>
      <el-row :gutter="10">
        <el-col :span="16">
          <el-form-item label="验证码">
            <el-input placeholder="请输入验证码" v-model="verification"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
          <el-button style="width: 100%; border: #42b983 solid 1px;color: #42b983" @click="getVerify">{{verify}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button style="width: 100%;background-color: #42b983;color: #fff" @click="checkout">立即验证</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import router from "@/router";
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

// 员工输入的登录信息
const staff = ref({name:'',password:'',phone:''});
// 员工登录触发事件
const login = () => {
  if (staff.value.name === '' || staff.value.password ==='') {
    ElMessage.error("用户名或密码不能为空")
  }else {
    console.log(staff.value);
    axios.post(BASE_URL + "/v1/staff/login", staff.value).then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success("登录成功");
        // console.log(JSON.stringify(response.data.data));
        localStorage.setItem('staff', JSON.stringify(response.data.data))
        localStorage.setItem('breadCrumb',JSON.stringify('科室管理'));
        console.log(response.data.data);
        router.push("/");
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

// 控制手机号验证弹窗
const dialogVisible = ref(false)
// 员工输入的验证码
const verification = ref('');
// 点击获取的验证码
const verify = ref('点击获取验证码');
// 点击打开弹窗方法
const logPhone = () => {
  dialogVisible.value = true;
  staff.value.name = '';
  staff.value.password = '';
}
// 获取验证码
const getVerify = () => {
  if (staff.value.phone == '' || staff.value.phone == null || staff.value.phone.trim().length === 0) {
    ElMessage.error("手机号不能为空")
  }else {
    axios.get(BASE_URL + "/v1/staff/getVerify").then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success("获取成功");
        verify.value = response.data.data;
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}
const handleClose = () => {
  if (confirm("确认关闭弹窗吗？")){
    dialogVisible.value=false;
    staff.value.phone = '';
    verify.value = '点击获取验证码';

  }
}
// 验证验证码，并获取用户名和密码
const checkout = () => {
  if (verify.value != '点击获取验证码') {
    if (verification.value == verify.value) {
      // console.log(staff.value)
      axios.post(BASE_URL + "/v1/staff/login",staff.value).then((response) => {
        if (response.data.code === 2000) {
          // verify.value = response.data.data;
      ElMessage.success("验证成功")
          staff.value.name = response.data.data.name;
          staff.value.password = response.data.data.password;
          dialogVisible.value=false;
          staff.value.phone = '';
          verify.value = '点击获取验证码';
          verification.value = '';
        } else {
          ElMessage.error("手机号码错误");
        }
      })
    } else {
      ElMessage.error("验证码错误")
    }
  }else {
    ElMessage.error("请获取验证码")
  }
}

</script>

<style scoped>

</style>